<script setup>
import { ref } from 'vue'
// 日期
const week = [
  '星期日',
  '星期一',
  '星期二',
  '星期三',
  '星期四',
  '星期五',
  '星期六'
]

const weekDay = ref('')
const updateWeek = () => {
  const date = new Date()
  const w = date.getDay()
  weekDay.value = week[w]
}

setInterval(updateWeek, 1000)
updateWeek()
// 时间
const currentTime = ref('')
const updatetime = () => {
  currentTime.value = new Date().toLocaleString().replace(/\//g, '-')
}

setInterval(updatetime, 1000)

updatetime()
</script>

<template>
  <div>
    <dv-border-box1 style="height: 18vh">
      <div style="width: 50%; margin-left: 23%; margin-bottom: -10px">
        <div small-bg style="">
          <dv-decoration3 style="width: 250px" />
        </div>
        <span
          style="
            font-size: 30px;
            font-family: '宋体';
            font-weight: 800;
            color: aqua;
          "
          >数据可视化平台
        </span>
        <div small-bg style="margin-left: 720px; margin-top: -20px">
          <dv-decoration3 style="width: 250px; height: 30px" />
        </div>

        <div small-bg style="margin-left: 320px">
          <dv-decoration5 :dur="2" style="width: 300px; height: 40px" />
        </div>
        <div
          w50rem
          h18rem
          flex
          justify-center
          items-center
          bg-dark
          style="margin-left: 701px"
        >
          <dv-decoration2 :dur="2" style="width: 200px; height: 5px" />
        </div>
        <div w50rem h18rem flex justify-center items-center bg-dark>
          <dv-decoration2 :dur="2" style="width: 200px; height: 5px" />
        </div>
      </div>

      <div style="width: 20%; margin-left: 80%; margin-top: -60px">
        <span
          style="
            font-size: 20px;
            font-family: '宋体';
            font-weight: 800;
            color: aqua;
          "
          >{{ currentTime }}&ensp;{{ weekDay }}</span
        >
      </div>

      <!-- <div small-bg>
        <dv-decoration8 :reverse="true" style="width: 300px; height: 50px" />
      </div> -->
    </dv-border-box1>
  </div>
</template>

<style scoped></style>
